<template>
  <div>
    <el-tabs
      ref="tabs"
      v-model="activeName"
      class="text-tabs TTB-no-gutter TTB-gutter"
      @tab-click="change"
    >
      <el-tab-pane label="统计分析管理" name="total"></el-tab-pane>
      <el-tab-pane label="恶性负载管理" name="perniciousLoad"></el-tab-pane>
      <el-tab-pane label="能耗阈值管理" name="threshold"></el-tab-pane>
      <el-tab-pane label="用能设备黑白名单" name="blackWhite"></el-tab-pane>
    </el-tabs>
    <component :is="activeName" :ref="activeName"></component>
  </div>
</template>
<script>
import total from "@/views/configuration/arithmetic/portrayal/components/total.vue";
import perniciousLoad from "@/views/configuration/arithmetic/portrayal/components/perniciousLoad.vue";
import threshold from "@/views/configuration/arithmetic/portrayal/components/threshold.vue";
import blackWhite from "@/views/configuration/arithmetic/portrayal/components/blackWhite.vue";

export default {
  components: {
    total,
    perniciousLoad,
    threshold,
    blackWhite,
  },
  data() {
    return {
      activeName: "total",
    };
  },
  created() {},
  methods: {
    change() {
      const name = this.$refs.tabs.value;
      if (this.activeName === name) {
        return false;
      }
      // this.$refs[name].initData();
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .text-tabs {
  .el-tabs__active-bar {
    width: 79px;
  }
  .el-tabs__item {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
  }
}
</style>
